<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>todolist小练习1</title>
    <link rel="stylesheet" href="./todo.css" />
  </head>
  <body>
    <div class="page-top">
      <div class="page-content">
        <h3>任务计划列表</h3>
      </div>
    </div>
    <div id="main">
      <h3 class="bg-title">添加任务:</h3>
      <input
        type="text"
        class="task-input"
        placeholder="例如：吃饭睡觉打豆豆；提示：回车即可添加任务"
        @keyup.enter="addTask"
        v-model="taskname"
      />
      <ul class="task-list">
        <li>{{unfinshNum}}个任务未完成</li>
        <li class="action">
          <a href="#all">所有任务</a>
          <a href="#unfinished">未完成的任务</a>
          <a href="#finished">完成的任务</a>
        </li>
      </ul>
      <h3 style="margin-bottom: 20px;">任务列表:</h3>
      <!-- 盛放任务列表的盒子-->
      <div class="tasks">
        <span class="no-task-tip" v-show="list.length==0"
          >还没有添加任何任务</span
        >

        <ul class="tasks-list">
          <li
            class="tasks-item"
            v-for="(item,index) in filterlist"
            :class="{editing:index==num}"
          >
            <div class="view">
              <input type="checkbox" class="toggle" v-model="item.isChecked" />
              <label @click="editItem(index)">{{item.title}}</label>
              
              <button class="delete" @click="deleteTask(index)"></button>
            </div>
            <!-- 编辑的输入框 -->
            <input
              type="text"
              class="edit"
              v-model="item.title"
              v-focus
              v-model="item.title"
              @keyup.enter="complete"
              @keyup.esc="exit(index)"
            />
          </li>
        </ul>
      </div>
    </div>
    <script src="./vue开发版.js"></script>
    <script>
      // 模拟数据
      // const list = [
      //   { title: "吃饭", isChecked: true },
      //   { title: "睡觉", isChecked: false }
      // ];

      //获取数据
      var list = JSON.parse(localStorage.getItem("myList")) || [];

      var filterlist = {
        //所有任务列表
        all: function(list) {
          return list;
        },
        //未完成任务列表
        unfinished: function(list) {
          return list.filter((item, index) => {
            return item.isChecked == false;
          });
        },
        //完成的任务列表
        finished: function(list) {
          return list.filter((item, index) => {
            return item.isChecked == true;
          });
        }
      };
      var vm = new Vue({
        el: "#main",
        data: {
          list: list,
          taskname: "",
          num: -1, //初始化num值，用作添加类名的条件
          //添加类名的条件
          beforename: "", //用来存放编辑之前的名称
          status: "" //保存任务状态
        },
        watch: {
          list: {
            handler: function(newVal, oldVal) {
              localStorage.setItem("myList", JSON.stringify(newVal));
            }
          }
        },
        methods: {
          //添加任务
          addTask() {
            //回车键点击
            if (this.taskname == "") {
              return;
            }
            this.list.unshift({
              title: this.taskname,
              isChecked: true
            });
            //清空输入框
            this.taskname = "";
          },
          //删除任务
          deleteTask(index) {
            this.list.splice(index, 1);
          },
          //编辑任务
          editItem(index) {
            //num == 当前点击的索引
            this.num = index;
            this.beforename = this.list[index].title;
          },
          //完成编辑
          complete() {
            //输入框隐藏，div显示
            this.num = -1;
          },
          //esc退出编辑
          exit (index) {
            this.list[index].title = this.beforename;
            this.num = -1;
          }
        },
        computed: {
          //未完成任务列表
          unfinshNum() {
            return this.list.filter(item => {
              return item.isChecked == false;
            }).length;
          },
          //过滤后点列表
          filterlist() {
            return filterlist[this.status]
              ? filterlist[this.status](list)
              : list;
          }
        },
        //自定义指令
        directives: {
          focus: {
            update(el) {
              el.focus();
            }
          }
        }
      });
      //获取矛点
      function getHash() {
        var hash = window.location.hash.slice(1);
        console.log(hash);
        vm.status = hash;
      }
      getHash();
      window.addEventListener("hashchange", getHash);
    </script>
  </body>
  <html></html>
</html>
